JavaScript events are actions or occurrences that happen in the browser. They can be triggered by user interactions or by the browser itself.
Here are some common events in JavaScript:
Event listeners can be added to elements to execute code when an event occurs.
<button id="myButton">Click Me!</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("Button was clicked!");
});
</script>
Event listeners can also be removed from elements.
<button id="myButton">Click Me!</button>
<script>
function myFunction() { alert("Button was clicked!"); }
document.getElementById("myButton").addEventListener("click", myFunction);
</script>
The event object contains information about the event that occurred.
document.getElementById("myButton").addEventListener("click", function(event) {
console.log("Event type: " + event.type);
console.log("Element ID: " + event.target.id);
});
Event propagation determines the order in which events are received by the target element and its ancestors.
document.getElementById("parent").addEventListener("click", function() {
alert("Parent clicked!");
}, true); // Use true for capturing phase
document.getElementById("child").addEventListener("click", function() {
alert("Child clicked!");
}, false); // Use false for bubbling phase
The preventDefault()
method cancels the event if it is cancelable, meaning that the default action
that belongs to the event will not occur.
document.getElementById("myLink").addEventListener("click", function(event) {
event.preventDefault();
alert("Default action prevented!");
});
The stopPropagation()
method prevents further propagation of the current event in the capturing and
bubbling phases.
document.getElementById("child").addEventListener("click", function(event) {
event.stopPropagation();
alert("Propagation stopped!");
});